<template>
    <div class="demo">
        <h1>{{msg}}</h1>
        <h2>学生名称: {{myName}}</h2>
        <h2>年龄: {{age+1}}</h2>
        <h2>性别: {{gender}}</h2>
        <button @click="changeName">修改名称</button>
    </div>
</template>

<script>
    export default {
    name: 'StudentComponent',
    data() {
        return {
            msg: "学生信息",
            myName: this.name //读取props中的name
            // name: '清华大学', //固定数据, 支持用标签的地方传参
            // age: 18,
            // gender: '男'
        }
    },
    // props:['name','gender','age'] //动态数据, 支持用标签的地方传参
    // props:{ // 动态数据, 支持用标签的地方传参, 接受时会进行类型校验
    //     name: String,
    //     age: Number, // 控制台会有类型校验异常提示
    //     gender: String
    // }
    props:{
        name: {
            type: String,
            required: true // 必传
        },
        age: {
            type: Number,
        },
        gender: {
            type: String,
            default: '男'
        }
    },
    methods: {
        changeName() {
            // this.name = '北京大学' // 不能修改, 因为props是只读的
            this.myName = '北京大学' // 可以修改, 因为myName是data中的数据
        }
    },
    }    
</script>

<style>
</style>